import 'dart:math';

import 'package:cat_eye/base/base_refresh_state.dart';
import 'package:cat_eye/bean/home_body_bean.dart';
import 'package:cat_eye/config/string_config.dart';
import 'package:cat_eye/root_page/home_page/video/video_play_widget.dart';
import 'package:cat_eye/util/photo_preview_widget.dart';
import 'package:cat_eye/util/util.dart';
import 'package:cat_eye/view_model/find_view_model/find_recommend_view_model.dart';
import 'package:flutter/material.dart';
import 'package:waterfall_flow/waterfall_flow.dart';

/*
* @Package: root_page.find_page
* @ClassName: find_recommend_widget
* @Author: szj
* @CreateDate: 8/4/21 7:32 PM
* TODO 发现-推荐页面
*  参考: [https://github.com/fluttercandies/waterfall_flow/blob/master/README-ZH.md]
*/
class FindRecommendWidget extends StatefulWidget {
  const FindRecommendWidget({Key key}) : super(key: key);

  @override
  _FindRecommendWidgetState createState() => _FindRecommendWidgetState();
}

class _FindRecommendWidgetState
    extends BaseRefreshState<FindRecommendWidget, FindRecommendViewModel>  {
  @override
  FindRecommendViewModel get buildViewModel => FindRecommendViewModel();

  @override
  Widget buildWidget(BuildContext context, FindRecommendViewModel model) {
    return WaterfallFlow.builder(
        itemCount: model.itemList.length,
        gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          //左右间距
          // crossAxisSpacing: 5.0,
          //上下间距
          mainAxisSpacing: 5.0,

          // lastChildLayoutTypeBuilder: (index) => index == model.itemList.length
          //     ? LastChildLayoutType.foot
          //     : LastChildLayoutType.none,
        ),
        itemBuilder: (BuildContext context, int index) {
          return _layout(model.itemList[index], context);
        },
    );
  }

  Random _random = Random();

  List<double> heightList = [100, 150, 300];

  //圆角
  double _radio = 8;

  Widget _layout(ItemList itemList, BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 4, right: 4),
      decoration: BoxDecoration(
          color: Colors.black38.withAlpha(40),
          borderRadius: BorderRadius.circular(_radio)),
      child: Column(
        children: [

          _imageStack(itemList),

          Row(
            children: [
              Padding(
                padding: EdgeInsets.all(5),
                child: cacheImage(
                  itemList.data.content.data.owner.avatar,
                  width: 24,
                  height: 24,
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              text(
                itemList.data.header.issuerName,
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _imageStack(itemList){
    return  Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(12),
              topLeft: Radius.circular(_radio)),
          child: InkWell(
            onTap: () => onClick(
              context,
              itemList.data.content.type,
              urlList: itemList.data.content.data.urls,
              videoUrl: itemList.data.content.data.playUrl,
            ),
            child: cacheImage(itemList.data.content.data.cover.feed,
                width: MediaQuery.of(context).size.width / 2,
                height: heightList[_random.nextInt(heightList.length)]),
          ),
        ),
        Positioned(
            right: 10,
            top: 10,
            child: Icon(itemList.data.content.type == StringConfig.VIDEO
                ? Icons.play_circle_outline
                : itemList.data.content.data.urls.length>1?Icons.photo_library : null,
              color: Colors.white,))
      ],
    );
  }

  /*
   *  urlList 图片集合
   *  context 上下文
   *  type 类型
   *  videoUrl
   */
  void onClick(BuildContext context, String type,
      {String videoUrl, List<String> urlList}) {
    if (type == StringConfig.VIDEO) {
      //视频
      Navigator.push(
          context,
          router(
              widget: VideoPlayWidget(
            url: videoUrl,
                isFullScreen: true,
          )));

    } else if (type == StringConfig.UGC_PICTURE) {
      //图片
      Navigator.push(
          context, router(widget: PhotoPreViewWidget(urlList: urlList)));

    }
  }

  double _opacity(List<String> urls) {
    if (urls == null || urls.length == 0) {
      return 0;
    } else {
      return 1;
    }
  }
}
